<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
	<p>只保存下面表格为pdf,默认是不支持中文的，所以页面有中文的需要设置字体。操作具体看官网</p>
    <a href="javascript:doit()" class="button">保存pdf</a>
    <div id="app">
        <h2>Table</h2>
        <table border="1" cellPadding="10" style="width: 60%;">
            <thead>
                <tr>
                    <th>as</th>
                    <th>gdfg</th>
                    <th>65875</th>
                    <th>trur</th>
                    <th>453gfh</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th rowSpan="2">twet2</th>
                    <td>ewr</td>
                    <td>qw454we</td>
                    <td>
                        <p>qwewe</p>
                        <p>qwewe</p>
                        <p>qwewe</p>
                    </td>
                    <td>{teachingGoals}</td>
                </tr>
                <tr>
                    <td>234gd</td>
                    <td>qwewe</td>
                    <td>
                        <p>qwewe</p>
                        <p>qwewe</p>
                        <p>qweweqwewe</p>
                    </td>
                    <td>{teachingAchievement}</td>
                </tr>
                <tr>
                    <th rowSpan="6">abc</th>
                    <td>qwe</td>
                    <td>qwewe</td>
                    <td>
                        <p>1、qwe</p>
                        <p>2、qwe</p>
                        <p>3、qwewq</p>
                        <p>4、qwe</p>
                    </td>
                    <td>{classroomAtmosphere}</td>
                </tr>
                <tr>
                    <td>qqe</td>
                    <td>qweqwe</td>
                    <td>
                        <p>qe</p>
                        <p>qwe</p>
                        <p>qweqwe</p>
                        <p>qwe</p>
                    </td>
                    <td>{classroomControl}</td>
                </tr>
                <tr>
                    <td>qweqwe(14 </td>
                    <td>qweqw
                    </td>
                    <td>
                        <p>qwewe</p>
                        <p>qwewe</p>
                        <p>qwewe</p>
                        <p>4、qwewe</p>
                        <p>5、qwewe</p>
                    </td>
                    <td>{classroomThinking}</td>
                </tr>
                <tr>
                    <td>qwewe</td>
                    <td>qwewe</td>
                    <td>
                        <p>qwewe</p>
                        <p>qwewe</p>
                        <p>qwewe/qwewe</p>
                        <p>qwewe</p>
                    </td>
                    <td>{classroomAdaptToStudents}</td>
                </tr>
                <tr>
                    <td>qwewe</td>
                    <td>qwewe
                    </td>
                    <td>
                        <p>qwewe</p>
                        <p>qwewe</p>
                        <p>qwewe </p>
                        <p>4、S-T </p>
                    </td>
                    <td>{classroomInteraction}</td>
                </tr>
                <tr>
                    <td>qwewe</td>
                    <td>qwewe</td>
                    <td>
                        <p>qwewe</p>
                        <p>qwewe</p>
                        <p>qwewe</p>
                    </td>
                    <td>{classroomEvaluation}</td>
                </tr>
                <tr>
                    <td>qwewe</td>
                    <td>qwewe</td>
                    <td>qwewe</td>
                    <td>
                        <p>qwewe </p>
                        <p>qwewe </p>
                        <p>qwewe</p>
                        <p>qwewe </p>
                    </td>
                    <td>{studentResponse}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="./jspdf.debug.js"></script>
    <script>
        function doit() {
            // var doc = new jsPDF();
            // doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
            // doc.save('Test.pdf');

            var pdf = new jsPDF('p', 'pt', 'letter'), source = document.getElementById('app'),
                margins = {
                    top: 80,
                    bottom: 60,
                    left: 40,
                    width: 522
                };

            pdf.fromHTML(
                source // HTML string or DOM elem ref.
                , margins.left
                , margins.top
                , {
                    'width': margins.width
                },
                function (dispose) {
                    pdf.save('html2Pdf.pdf');
                },
                margins
            )
        }

    </script>
</body>

</html>